Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
There was a problem hiding this comment.
Pull request overview
This PR addresses React 18 aggressive batching issues by refactoring how Floating UI elements are referenced in JoyrideFloater and simplifying spotlight visibility logic in JoyrideOverlay, aiming to make tooltip/spotlight rendering more reliable.
Changes:
- Updated
JoyrideFloaterto usetooltipFloating.elementswhen wiringautoUpdate, aligning with Floating UI’s elements-based API. - Simplified
JoyrideOverlayspotlight visibility by computingshowSpotlightdirectly instead of managing it via state/effects. - Updated the Floating UI test mock return shape to include the
elementsproperty.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/components/Floater.tsx |
Switches autoUpdate wiring to use tooltipFloating.elements to improve reliability under React 18 batching. |
src/components/Overlay.tsx |
Replaces spotlight state/effect toggling with a direct showSpotlight computation. |
test/components/Floater.spec.tsx |
Updates useFloating mock return to include the elements field expected by production code. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- refactor spotlight visibility logic in Overlay - update Floater autoUpdate effect
- move needsScrolling to modules/dom - move shouldHideBeacon to modules/step - move hexToRGB to styles
- add origin tracking to next() and prev()
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 32 out of 32 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
This pull request refactors and improves the codebase by enhancing the tracking of user interaction origins, simplifying spotlight logic, and reorganizing utility functions for better maintainability. The most significant changes include passing an
originparameter to navigation controls, moving utility functions to more appropriate modules, and simplifying spotlight state management. Below are the key changes grouped by theme:User Interaction Tracking
next,prev, etc.) inuseControls,Tooltip, andTourRendererto accept and propagate anoriginparameter, allowing the system to track the source of user actions (e.g., button, keyboard, overlay). TheOriginenum was also updated to includeBUTTON_BACK. This change is reflected across components, hooks, types, and tests. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]Spotlight and Overlay Logic
JoyrideOverlaycomponent by replacing stateful management with a derived value based on the current lifecycle and placement, and removed relateduseEffectand state. [1] [2]Refactoring and Utility Function Organization
Moved
needsScrollingandshouldHideBeaconfromhelpers.tsxto more appropriate modules (dom.tsandstep.tsrespectively), improving separation of concerns. Updated all relevant imports. [1] [2] [3] [4] [5] [6] [7] [8] [9]Moved the
hexToRGBfunction fromhelpers.tsxtostyles.ts, and updated imports in code and tests accordingly. [1] [2] [3]Floating UI and Test Utilities
JoyrideFloaterto use the newelementsproperty instead ofrefs, aligning with the latest floating UI API and improving code clarity. Adjusted related test mocks. [1] [2]